<template>
  <div id="app">
    <div class="header">
      <h1>Vue 视频播放器</h1>
      <p>现代化的视频播放组件示例 - 连续播放</p>
    </div>

    <!-- 加载提示 -->
    <div v-if="isLoadingDurations" class="loading-overlay">
      <div class="loading-content">
        <div class="loading-spinner"></div>
        <p>正在加载视频信息...</p>
        <div class="loading-progress">
          <div class="progress-bar" :style="{ width: loadingProgress + '%' }"></div>
        </div>
        <p class="loading-text">{{ loadingProgress }}% ({{ Math.round(loadingProgress * videoArray.length / 100) }}/{{
          videoArray.length }})</p>
      </div>
    </div>

    <!-- 主要内容 -->
    <div v-else>
      <div class="video-section">
        <VideoPlayer ref="videoPlayer" :src="currentVideoSrc" :autoplay="false"
          :external-current-time="externalCurrentTime" :shouldAutoPlay="shouldAutoPlayNext"
          :black-screen-duration="currentBlackScreenDuration" @play-state-change="onVideoPlayStateChange"
          @time-update="onVideoTimeUpdate" @video-loaded="onVideoLoaded" @video-ended="onVideoEnded"
          class="main-video" />

        <!-- 视频信息显示 -->
        <div class="video-info">
          <p>正在播放: {{ currentVideoIndex + 1 }} / {{ videoArray.length }}</p>
          <p>总进度: {{ formatTime(totalCurrentTime) }} / {{ formatTime(totalDuration) }}</p>
        </div>
      </div>

      <div class="demo-section">
        <h2>视频播放列表控制</h2>

        <!-- 显示总时长信息 -->
        <div class="duration-info">
          <h4>📊 时长统计</h4>
          <div class="duration-grid">
            <div v-for="(item, index) in videoArray" :key="index" class="duration-item">
              <span class="duration-label">
                {{ isNaN(item) ? `视频 ${index + 1}` : `黑屏 ${index + 1}` }}
              </span>
              <span class="duration-value">{{ formatTime(videoDurations[index] || 0) }}</span>
            </div>
            <div class="duration-item total">
              <span class="duration-label">总时长</span>
              <span class="duration-value">{{ formatTime(totalDuration) }}</span>
            </div>
          </div>
        </div>

        <div class="progress-demo">
          <ProgressBar :current="totalCurrentTime" :duration="totalDuration" :buffer="totalCurrentTime * 1.1"
            @seek="onExternalSeek" />
          <div class="demo-controls">
            <button @click="toggleVideoPlay" class="demo-btn">
              {{ isVideoPlaying ? '暂停' : '播放' }}
            </button>
            <button @click="previousVideo" class="demo-btn" :disabled="currentVideoIndex === 0">
              上一个
            </button>
            <button @click="nextVideo" class="demo-btn" :disabled="currentVideoIndex === videoArray.length - 1">
              下一个
            </button>
            <span class="demo-time">
              {{ formatTime(totalCurrentTime) }} / {{ formatTime(totalDuration) }}
            </span>
          </div>
        </div>

        <!-- 播放列表 -->
        <div class="playlist">
          <h3>播放列表</h3>
          <div class="playlist-items">
            <div v-for="(video, index) in videoArray" :key="index"
              :class="['playlist-item', { 'active': index === currentVideoIndex, 'played': index < currentVideoIndex }]"
              @click="jumpToVideo(index)">
              <span class="item-index">{{ index + 1 }}</span>
              <span class="item-name">
                {{ isNaN(video) ? `视频 ${index + 1}` : `黑屏 ${index + 1}` }}
              </span>
              <span class="item-duration">{{ formatTime(videoDurations[index] || 0) }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- <div class="info-section">
        <h2>功能特性</h2>
        <div class="features">
          <div class="feature">
            <h3>🎥 视频播放器</h3>
            <ul>
              <li>支持播放/暂停控制</li>
              <li>音量控制和静音</li>
              <li>全屏播放</li>
              <li>自动隐藏控制栏</li>
              <li>现代化UI设计</li>
            </ul>
          </div>
          <div class="feature">
            <h3>📊 进度条组件</h3>
            <ul>
              <li>拖拽进度调节</li>
              <li>点击跳转</li>
              <li>缓冲进度显示</li>
              <li>悬停时间提示</li>
              <li>响应式设计</li>
            </ul>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, nextTick, onMounted } from 'vue'
import VideoPlayer from './components/VideoPlayer.vue'
import ProgressBar from './components/ProgressBar.vue'

// 响应式数据
const videoArray = ref([
  '360',
  'http://192.168.1.225:8101/index/api/downloadFile?file_path=/opt/media/bin/www/record/mianyang/nest_1829045597119066112_1/2025-05-28/00-03-07-412.mp4',
  '360',
  'http://192.168.1.225:8101/index/api/downloadFile?file_path=/opt/media/bin/www/record/mianyang/nest_1829045597119066112_1/2025-05-28/00-03-07-412.mp4',
  '120',
  'http://192.168.1.225:8101/index/api/downloadFile?file_path=/opt/media/bin/www/record/xiongan/nest_ce43a39d-a058-46ed-8881-375ac6cb95e2/2025-05-28/02-19-28-2.mp4',
  '360',
  'http://192.168.1.225:8101/index/api/downloadFile?file_path=/opt/media/bin/www/record/mianyang/nest_1829045597119066112_1/2025-05-28/00-03-07-412.mp4',
  'http://192.168.1.225:8101/index/api/downloadFile?file_path=/opt/media/bin/www/record/xiongan/nest_ce43a39d-a058-46ed-8881-375ac6cb95e2/2025-05-28/02-19-28-2.mp4',
  '120',
  'http://192.168.1.225:8101/index/api/downloadFile?file_path=/opt/media/bin/www/record/xiongan/nest_ce43a39d-a058-46ed-8881-375ac6cb95e2/2025-05-28/02-19-28-2.mp4',
  '360',
  'http://192.168.1.225:8101/index/api/downloadFile?file_path=/opt/media/bin/www/record/mianyang/nest_1829045597119066112_1/2025-05-28/00-03-07-412.mp4',
  'http://192.168.1.225:8101/index/api/downloadFile?file_path=/opt/media/bin/www/record/xiongan/nest_ce43a39d-a058-46ed-8881-375ac6cb95e2/2025-05-28/02-19-28-2.mp4',
  '120',
  'http://192.168.1.225:8101/index/api/downloadFile?file_path=/opt/media/bin/www/record/xiongan/nest_ce43a39d-a058-46ed-8881-375ac6cb95e2/2025-05-28/02-19-28-2.mp4',
  'http://192.168.1.225:8101/index/api/downloadFile?file_path=/opt/media/bin/www/record/mianyang/nest_1816659027711897600_1/2025-05-27/15-13-32-2.mp4',
  '360',
  'http://192.168.1.225:8101/index/api/downloadFile?file_path=/opt/media/bin/www/record/mianyang/nest_1829045597119066112_1/2025-05-28/00-03-07-412.mp4',
  '120',
  'http://192.168.1.225:8101/index/api/downloadFile?file_path=/opt/media/bin/www/record/xiongan/nest_ce43a39d-a058-46ed-8881-375ac6cb95e2/2025-05-28/02-19-28-2.mp4',
  '120',
  'http://192.168.1.225:8101/index/api/downloadFile?file_path=/opt/media/bin/www/record/xiongan/nest_ce43a39d-a058-46ed-8881-375ac6cb95e2/2025-05-28/02-19-28-2.mp4',
  'http://192.168.1.225:8101/index/api/downloadFile?file_path=/opt/media/bin/www/record/mianyang/nest_1816659027711897600_1/2025-05-27/15-13-32-2.mp4',
  '120',
  'http://192.168.1.225:8101/index/api/downloadFile?file_path=/opt/media/bin/www/record/xiongan/nest_ae05a76b-5efc-42d7-aacb-e1ec986e3ed2/2025-05-28/02-19-11-4.mp4',
  '360',
])

const currentVideoIndex = ref(0)
const videoDurations = ref([])
const isVideoPlaying = ref(false)
const currentVideoTime = ref(0)
const currentVideoDuration = ref(0)
const externalCurrentTime = ref(-1)
const shouldAutoPlayNext = ref(false)
const isVideoSwitching = ref(false)
const isLoadingDurations = ref(true)
const loadingProgress = ref(0)
const isPlaylistCompleted = ref(false)
const durationCumulative = ref([]) // 累积时长数组，用于快速查找
const seekDebounceTimer = ref(null)

// 模板引用
const videoPlayer = ref(null)

// 计算属性
const currentItem = computed(() => {
  return videoArray.value[currentVideoIndex.value] || ''
})

const currentVideoSrc = computed(() => {
  const item = currentItem.value
  return isNaN(item) ? item : ''
})

const currentBlackScreenDuration = computed(() => {
  const item = currentItem.value
  console.log(`🔍 计算黑屏时长: currentVideoIndex=${currentVideoIndex.value}, item="${item}", type=${typeof item}`)
  console.log(`🔍 isNaN(item)=${isNaN(item)}, parseFloat(item)=${parseFloat(item)}`)
  const duration = isNaN(item) ? 0 : parseFloat(item)
  console.log(`🔍 最终黑屏时长: ${duration}`)
  return duration
})

const totalDuration = computed(() => {
  return videoDurations.value.reduce((sum, duration) => sum + (duration || 0), 0)
})

const totalCurrentTime = computed(() => {
  let totalTime = 0
  for (let i = 0; i < currentVideoIndex.value; i++) {
    totalTime += videoDurations.value[i] || 0
  }
  totalTime += currentVideoTime.value
  return totalTime
})

// 监听器
watch(currentVideoIndex, (newIndex, oldIndex) => {
  if (newIndex !== oldIndex) {
    currentVideoTime.value = 0
    // 移除isVideoSwitching状态设置，避免阻塞跳转
    const item = videoArray.value[newIndex]
    console.log(isNaN(item) ? `切换到视频 ${newIndex + 1}` : `切换到黑屏 ${newIndex + 1}`)
  }
})

// 方法
const calculateCumulativeDurations = () => {
  durationCumulative.value = []
  let cumulative = 0

  for (let i = 0; i < videoDurations.value.length; i++) {
    durationCumulative.value.push(cumulative)
    cumulative += videoDurations.value[i] || 0
  }

  console.log('📊 累积时长数组更新完成')
}

const onExternalSeek = (totalTime) => {
  // 清除之前的防抖计时器
  if (seekDebounceTimer.value) {
    clearTimeout(seekDebounceTimer.value)
  }

  // 防抖处理，避免频繁跳转
  seekDebounceTimer.value = setTimeout(() => {
    performSeek(totalTime)
  }, 100) // 100ms防抖
}

const performSeek = (totalTime) => {
  if (totalDuration.value === 0 || durationCumulative.value.length === 0) {
    console.log('🚫 总时长为0或累积数组未准备好，忽略跳转')
    return
  }

  console.log(`🎯 执行跳转: totalTime=${totalTime}s / ${totalDuration.value}s`)

  // 使用二分查找快速定位目标视频
  const targetVideoIndex = findVideoIndexByTime(totalTime)
  const videoStartTime = durationCumulative.value[targetVideoIndex] || 0
  const remainingTime = Math.max(0, totalTime - videoStartTime)

  console.log(`🎯 目标视频: ${targetVideoIndex + 1}, 视频内时间: ${remainingTime}s`)

  if (targetVideoIndex !== currentVideoIndex.value) {
    console.log(`🔄 切换视频: ${currentVideoIndex.value + 1} -> ${targetVideoIndex + 1}`)

    // 直接更新，不设置切换状态以避免阻塞
    currentVideoIndex.value = targetVideoIndex

    nextTick(() => {
      setTimeout(() => {
        externalCurrentTime.value = remainingTime
        nextTick(() => {
          externalCurrentTime.value = -1
        })
      }, 50) // 减少延迟
    })
  } else {
    console.log(`🔄 同视频内跳转: ${remainingTime}s`)
    externalCurrentTime.value = remainingTime
    nextTick(() => {
      externalCurrentTime.value = -1
    })
  }
}

// 二分查找快速定位视频索引
const findVideoIndexByTime = (totalTime) => {
  if (totalTime <= 0) return 0
  if (totalTime >= totalDuration.value) return videoDurations.value.length - 1

  let left = 0
  let right = durationCumulative.value.length - 1

  while (left <= right) {
    const mid = Math.floor((left + right) / 2)
    const startTime = durationCumulative.value[mid] || 0
    const endTime = startTime + (videoDurations.value[mid] || 0)

    if (totalTime >= startTime && totalTime < endTime) {
      return mid
    } else if (totalTime < startTime) {
      right = mid - 1
    } else {
      left = mid + 1
    }
  }

  return Math.min(left, videoDurations.value.length - 1)
}

const preloadAllVideoDurations = async () => {
  console.log('开始预加载所有视频时长...')
  isLoadingDurations.value = true
  videoDurations.value = new Array(videoArray.value.length).fill(0)

  const loadPromises = videoArray.value.map(async (item, index) => {
    if (isNaN(item)) {
      try {
        const duration = await getVideoDuration(item)
        videoDurations.value[index] = duration
      } catch (error) {
        console.warn(`视频 ${index + 1} 时长获取失败`)
        videoDurations.value[index] = 0
      }
    } else {
      videoDurations.value[index] = parseFloat(item)
    }

    loadingProgress.value = Math.round(((index + 1) / videoArray.value.length) * 100)
  })

  await Promise.all(loadPromises)

  // 计算累积时长数组
  calculateCumulativeDurations()

  isLoadingDurations.value = false
  console.log('所有视频时长加载完成, 总时长:', totalDuration.value, '秒')
}

const getVideoDuration = (videoUrl) => {
  return new Promise((resolve, reject) => {
    const video = document.createElement('video')
    video.preload = 'metadata'

    video.onloadedmetadata = () => {
      resolve(video.duration)
      video.remove()
    }

    video.onerror = () => {
      reject(new Error('视频加载失败'))
      video.remove()
    }

    setTimeout(() => {
      reject(new Error('获取时长超时'))
      video.remove()
    }, 10000)

    video.src = videoUrl
  })
}

const onVideoPlayStateChange = (isPlaying) => {
  isVideoPlaying.value = isPlaying
}

const onVideoTimeUpdate = ({ currentTime, duration }) => {
  if (!isVideoSwitching.value) {
    currentVideoTime.value = currentTime
    currentVideoDuration.value = duration
  }
}

const onVideoLoaded = ({ duration }) => {
  const expectedDuration = videoDurations.value[currentVideoIndex.value]

  if (Math.abs(duration - expectedDuration) > 1) {
    videoDurations.value[currentVideoIndex.value] = duration
    // 重新计算累积时长
    calculateCumulativeDurations()
  }

  currentVideoDuration.value = duration
  isVideoSwitching.value = false

  // 优化自动播放逻辑
  if (shouldAutoPlayNext.value) {
    nextTick(() => {
      setTimeout(() => {
        shouldAutoPlayNext.value = false
      }, 100) // 统一延迟时间
    })
  }
}

const onVideoEnded = () => {
  if (currentVideoIndex.value < videoArray.value.length - 1) {
    const wasPlaying = isVideoPlaying.value

    currentVideoTime.value = 0
    currentVideoIndex.value++
    isPlaylistCompleted.value = false
    shouldAutoPlayNext.value = true

    if (wasPlaying) {
      nextTick(() => {
        setTimeout(() => {
          if (videoPlayer.value) {
            videoPlayer.value.externalPlay()
          }
        }, 50)
      })
    }
  } else {
    isVideoPlaying.value = false
    isPlaylistCompleted.value = true
  }
}

const toggleVideoPlay = () => {
  console.log(`🎮 togglePlay被调用: 当前播放状态=${isVideoPlaying.value}, 黑屏模式=${isPlaylistCompleted.value}`)
  if (isPlaylistCompleted.value && !isVideoPlaying.value) {
    console.log('🔄 重新开始播放列表')
    restartPlaylist()
    return
  }

  if (isVideoPlaying.value) {
    videoPlayer.value.externalPause()
  } else {
    videoPlayer.value.externalPlay()
  }
}

const restartPlaylist = () => {
  console.log('🔄 开始重播列表')
  console.log(`🔄 重播前状态: currentVideoIndex=${currentVideoIndex.value}`)
  console.log(`🔄 videoArray[0]="${videoArray.value[0]}", type=${typeof videoArray.value[0]}`)

  // 先设置切换状态，防止外部跳转干扰
  isVideoSwitching.value = true

  currentVideoIndex.value = 0
  currentVideoTime.value = 0
  isPlaylistCompleted.value = false
  shouldAutoPlayNext.value = true

  console.log('🔄 重播后设置: currentVideoIndex=0, shouldAutoPlayNext=true')
  console.log(`🔄 重播后currentItem="${currentItem.value}"`)

  // 延迟重置切换状态，给VideoPlayer足够时间初始化
  nextTick(() => {
    setTimeout(() => {
      isVideoSwitching.value = false
      console.log('🔄 重播初始化完成，重置isVideoSwitching')
    }, 100)
  })
}

const previousVideo = () => {
  if (currentVideoIndex.value > 0) {
    console.log('手动切换到上一个视频')
    currentVideoIndex.value--
    isPlaylistCompleted.value = false
  }
}

const nextVideo = () => {
  if (currentVideoIndex.value < videoArray.value.length - 1) {
    const wasPlaying = isVideoPlaying.value
    console.log('手动切换到下一个视频')
    currentVideoIndex.value++
    isPlaylistCompleted.value = false

    if (wasPlaying) {
      shouldAutoPlayNext.value = true
    }
  }
}

const jumpToVideo = (index) => {
  if (index >= 0 && index < videoArray.value.length && index !== currentVideoIndex.value) {
    console.log(`跳转到视频 ${index + 1}`)
    currentVideoIndex.value = index
    isPlaylistCompleted.value = false
  }
}

const formatTime = (time) => {
  const minutes = Math.floor(time / 60)
  const seconds = Math.floor(time % 60)
  return `${minutes}:${seconds.toString().padStart(2, '0')}`
}

// 生命周期
onMounted(async () => {
  await preloadAllVideoDurations()
})
</script>

<style>
#app {
  font-family: 'Inter', 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 40px;
}

.header h1 {
  color: #667eea;
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.header p {
  color: #666;
  font-size: 1.1rem;
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.loading-content {
  text-align: center;
  padding: 40px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  width: 90%;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f0f0f0;
  border-top: 4px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loading-progress {
  width: 100%;
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
  margin: 20px 0 10px;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(45deg, #667eea, #764ba2);
  transition: width 0.3s ease;
}

.loading-text {
  color: #666;
  font-size: 14px;
  margin: 10px 0 0;
}

.video-section {
  margin-bottom: 60px;
}

.main-video {
  max-width: 800px;
  margin: 0 auto;
  aspect-ratio: 16/9;
}

.demo-section {
  background: #f8f9fa;
  border-radius: 16px;
  padding: 30px;
  margin-bottom: 40px;
}

.demo-section h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.duration-info {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.duration-info h4 {
  margin: 0 0 15px;
  color: #333;
}

.duration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.duration-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 6px;
  font-size: 14px;
}

.duration-item.total {
  background: #e3f2fd;
  font-weight: bold;
  color: #1565c0;
}

.duration-label {
  color: #666;
}

.duration-value {
  font-family: 'Courier New', monospace;
  color: #333;
}

.progress-demo {
  max-width: 600px;
  margin: 0 auto;
}

.demo-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.demo-btn {
  background: linear-gradient(45deg, #667eea, #764ba2);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.demo-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.demo-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.demo-time {
  font-family: 'Courier New', monospace;
  color: #666;
}

.info-section {
  margin-top: 60px;
}

.info-section h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.feature {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.feature:hover {
  transform: translateY(-5px);
}

.feature h3 {
  color: #667eea;
  margin-bottom: 15px;
  font-size: 1.2rem;
}

.feature ul {
  list-style: none;
  padding: 0;
}

.feature li {
  padding: 5px 0;
  color: #666;
  position: relative;
  padding-left: 20px;
}

.feature li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #667eea;
  font-weight: bold;
}

.video-info {
  text-align: center;
  margin-top: 10px;
  color: #666;
}

.video-info p {
  margin: 5px 0;
  font-size: 14px;
}

.playlist {
  margin-top: 30px;
}

.playlist h3 {
  text-align: center;
  color: #333;
  margin-bottom: 15px;
}

.playlist-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 600px;
  margin: 0 auto;
}

.playlist-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.playlist-item:hover {
  background: #f8f9fa;
  transform: translateY(-1px);
}

.playlist-item.active {
  border-color: #667eea;
  background: #f0f4ff;
}

.playlist-item.played {
  opacity: 0.7;
}

.item-index {
  width: 30px;
  height: 30px;
  background: #667eea;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  margin-right: 12px;
}

.playlist-item.active .item-index {
  background: #764ba2;
  animation: pulse 2s infinite;
}

.item-name {
  flex: 1;
  font-weight: 500;
}

.item-duration {
  color: #666;
  font-size: 14px;
  font-family: 'Courier New', monospace;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

@media (max-width: 768px) {
  #app {
    padding: 15px;
  }

  .header h1 {
    font-size: 2rem;
  }

  .demo-controls {
    gap: 8px;
  }

  .demo-btn {
    padding: 8px 12px;
    font-size: 12px;
  }
}
</style>
